<template>
	<view>
		<view class="title">
			<u-input v-model="value1" border="bottom" clearable placeholderStyle="color: #626262" placeholder="标题..."
				v-model:value="title1">
			</u-input>
			<view class="heng"></view>
		</view>

		<view class="container">
			<editor id="editor" show-img-size :read-only="isEdit" show-img-resize show-img-toolbar class="ql-container"
				:placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady">
			</editor>
		</view>

		<view class="toolbar" @touchend.stop="format" :style="'bottom: ' + (isIOS ? keyboardHeight : 0) + 'px'">
			<i class="iconfont icon-charutupian" @touchend.stop="insertImage"></i>
			<i :class="'iconfont icon-format-header-1 ' + (formats.header === 1 ? 'ql-active' : '')" data-name="header"
				:data-value="1"></i>
			<i :class="'iconfont icon-format-header-2 ' + (formats.header === 2 ? 'ql-active' : '')" data-name="header"
				:data-value="2"></i>
			<i :class="'iconfont icon-zitijiacu ' + (formats.bold ? 'ql-active' : '')" data-name="bold"></i>
			<i :class="'iconfont icon-zitishanchuxian ' + (formats.strike ? 'ql-active' : '')" data-name="strike"></i>
			<i :class="'iconfont icon-zitixieti ' + (formats.italic ? 'ql-active' : '')" data-name="italic"></i>
			<i :class="'iconfont icon-zuoduiqi ' + (formats.align === 'left' ? 'ql-active' : '')" data-name="align"
				data-value="left"></i>
			<i :class="'iconfont icon-juzhongduiqi ' + (formats.align === 'center' ? 'ql-active' : '')"
				data-name="align" data-value="center"></i>
			<i :class="'iconfont icon-youduiqi ' + (formats.align === 'right' ? 'ql-active' : '')" data-name="align"
				data-value="right"></i>
			<i :class="'iconfont icon-zuoyouduiqi ' + (formats.align === 'justify' ? 'ql-active' : '')"
				data-name="align" data-value="justify"></i>
			<i :class="'iconfont icon-line-height ' + (formats.lineHeight ? 'ql-active' : '')" data-name="lineHeight"
				data-value="2"></i>
			<i :class="'iconfont icon-Character-Spacing ' + (formats.letterSpacing ? 'ql-active' : '')"
				data-name="letterSpacing" data-value="2em"></i>
			<i :class="'iconfont icon-722bianjiqi_duanqianju ' + (formats.marginTop ? 'ql-active' : '')"
				data-name="marginTop" data-value="20px"></i>
			<i :class="'iconfont icon-723bianjiqi_duanhouju ' + (formats.micon-previewarginBottom ? 'ql-active' : '')"
				data-name="marginBottom" data-value="20px"></i>
			<i class="iconfont icon-clearedformat" @tap="removeFormat"></i>
			<i :class="'iconfont icon-font ' + (formats.fontFamily ? 'ql-active' : '')" data-name="fontFamily"
				data-value="Pacifico"></i>
			<i :class="'iconfont icon-fontsize ' + (formats.fontSize === '24px' ? 'ql-active' : '')"
				data-name="fontSize" data-value="24px"></i>
			<i :class="'iconfont icon-text_color ' + (formats.color === fontColor ? 'ql-active' : '')" data-name="color"
				:data-value="fontColor" @tap="open"></i>
			<i :class="'iconfont icon-fontbgcolor ' + (formats.backgroundColor === '#00ff00' ? 'ql-active' : '')"
				data-name="backgroundColor" data-value="#00ff00"></i>
			<!-- 引用黄河浪的color取色器 -->
			<i class="iconfont icon-date" @tap="insertDate"></i>
			<i class="iconfont icon-undo" @tap="undo"></i>
			<i class="iconfont icon-redo" @tap="redo"></i>
			<i :class="'iconfont icon-zitixiahuaxian ' + (formats.underline ? 'ql-active' : '')"
				data-name="underline"></i>
			<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
			<i class="iconfont icon-shanchu" @tap="clear"></i>
			<i :class="'iconfont icon-direction-rtl ' + (formats.direction === 'rtl' ? 'ql-active' : '')"
				data-name="direction" data-value="rtl"></i>
			<i class="iconfont icon-baocun" @click="store" :vaule="result" id="1"></i>
		</view>
		<t-color-picker ref="colorPicker" :color="color" @confirm="confirm" @cancel="cancel"></t-color-picker>
		<view class="box">
			<u--form>
				<u-form-item label="时间" prop="userInfo.name" borderBottom ref="item1">
					<picker :value="time" start="00:00" end="23:59" mode="time" @change="change">
						<!-- 里面要包含东西才生效，uview给他包装了一层 -->
						<view class="uni-input">{{time}}</view>
					</picker>
				</u-form-item>
				<u-form-item label="星期" @click="this.show2 = true" prop="userInfo.name" borderBottom ref="item1">
					<!-- 设置title的时候会有x号 -->
					<u-picker title="请选择星期几" ref="uPicker" :show="show2" :columns="columns" @confirm="confirmBottom"
						@cancel="cancelBottom"></u-picker>
					<u--input v-model="defaultValue" border="none"></u--input>
				</u-form-item>
				<!-- 注意，直接给button设置样式是没有效果的 -->
				<view class="my_bottom" @click="commit">
					<view class="myButton">
						<u-button type="success" text="立即保存" @click="store"></u-button>
					</view>

					<view class="myRight">
						<text class="myCollect">收藏</text>
						<view>
							<u-switch v-model="value4" size="20"></u-switch>
						</view>

					</view>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import tColorPicke from '../picker/t-color-picker.vue';
	import util from "../util/util.js"
	var _self;
	export default {
		components: {
			't-color-picker': tColorPicke
		},
		data() {
			return {
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 0.6
				},
				title1: '',
				isEdit: false,
				fontColor: '#000',
				formats: {},
				readOnly: false,
				placeholder: '开始输入...',
				editorHeight: 300,
				keyboardHeight: 0,
				isIOS: false,
				value1: '',
				result: '',
				show: false,
				show2: false,
				time: '',
				title: '选择星期几',
				columns: [
					['每天','周一', '周二', '周三', '周四', '周五', '周六', '周七']
				],
				defaultValue: '周一',
				value4: false,
				index: 0,
				isUpdate: false,
				acceptObj: '',
			};
		},
		onLoad(e) {
			let that = this
			_self = this;
			wx.cloud.init();
			if (!(JSON.stringify(e) === '{}')) {
				let obj = JSON.parse(decodeURIComponent(e.obj))
				//挂在内容
				this.taskContent = obj.taskContent
				let time = obj.taskTime.toString().substring(0,5)
				that.value4 = obj.interested
				that.time = time
				that.title1 = obj.taskTitle
				that.defaultValue = that.columns[0][obj.taskWeekday]
				that.isUpdate = true
				this.acceptObj = obj
			} else {
				that.time = util.formatTime(new Date())
			}
			
		},

		methods: {
			cancel() {
				this.isEdit = false;
			},
			open() {
				this.$refs.colorPicker.open();
				this.isEdit = true;
				// uni.hideKeyboard();
			},
			hideKey() {
				uni.hideKeyboard();
			},
			async confirm(e) {
				this.isEdit = false;
				this.fontColor = await e.hex;
				this.onStatusChange({
					detail: {
						color: e.hex
					}
				});
				this.$forceUpdate();
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context(function(res) {
					_self.editorCtx = res.context;
					//设置初始值
					_self.editorCtx.setContents({html: _self.taskContent})
				}).exec();
			},
			undo() {
				this.editorCtx.undo();
			},

			redo() {
				this.editorCtx.redo();
			},

			blur() {
				this.editorCtx.blur();
			},

			format(e) {
				// this.hideKey();
				let {
					name,
					value
				} = e.target.dataset;
				if (!name) return; // console.log('format', name, value)
				this.editorCtx.format(name, value);
			},

			onStatusChange(e) {
				this.formats = e.detail;
			},


			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success');
					}
				});
			},

			store(e) {
				let that = this
				this.editorCtx.getContents({
					success: function(res) {
						that.result = res.html
						let tempTime = that.time + ":00"
						let body = {
							interested: that.value4,
							taskContent: that.result,
							taskTime: tempTime,
							taskTitle: that.title1,
							taskWeekday: that.index
						}
						if (that.isUpdate) {
							body.id = that.acceptObj.id
							body.userId = that.acceptObj.userId
							wx.cloud.callContainer({
								config: {
									env: "prod-9gaetadn0414eb27"
								},
								path: "/memo/taskRemind/updateTask",
								header: {
									"X-WX-SERVICE": "springboot-memo",
									"content-type": "application/json",
									'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
								},
								method: "PUT",
								data: body,
								success(res) {
									wx.navigateBack({
										url: '../../page_mine/meno/meno',
										success() {
											//使用了api
											var page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
									})
							
								},
								fail(error) {
									console.log('失败', error)
								}
							})
						} else {
							//可以抽取出来当request.js组件
							wx.cloud.callContainer({
								config: {
									env: "prod-9gaetadn0414eb27"
								},
								path: "/memo/taskRemind/createTask",
								header: {
									"X-WX-SERVICE": "springboot-memo",
									"content-type": "application/json",
									'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
								},
								method: "POST",
								data: body,
								success(res) {
									wx.navigateBack({
										url: '../../page_mine/meno/meno',
										success() {
											//使用了api
											var page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
									})
							
								},
								fail(error) {
									console.log('失败', error)
								}
							})
							
						}
					
					},

				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success");
					}
				});
			},

			removeFormat() {
				this.editorCtx.removeFormat();
			},

			insertDate() {
				const date = new Date();
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				this.editorCtx.insertText({
					text: formatDate
				});
			},

			insertImage() {
				// const that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						_self.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							data: {
								id: 'abcd',
								role: 'god'
							},
							width: '80%',
							success: function() {
								console.log('insert image success');
							}
						});
					}
				});
			},
			change(e) {
				this.time = e.detail.value
				console.log(e)
			},

			confirmBottom(e) {
				this.show2 = false
				console.log(e)
				this.defaultValue = e.value[0]
				this.index = e.indexs[0]
				console.log(this.index)
			},
			cancelBottom(e) {
				this.show2 = false
			},
			commit() {

			}

		}
	};
</script>
<style>
	@import "./editor.css";

	.box {
		margin-left: 30rpx;
		position: fixed;
		bottom: 40rpx;
	}

	.myButton {
		margin-left: 25vw;
		width: 35vw;
	}

	.my_bottom {
		display: flex;
		margin-top: 20rpx;
	}

	.myRight {
		display: flex;
		margin-left: 6vw;
		margin-top: 25rpx;
	}

	.myCollect {
		display: block;
		margin-right: 10rpx;
		width: 10vw;
	}
</style>
